<template>
  <div class="bg-white w-full max-w-9xl rounded-lg">
    <div class="flex flex-col items-center p-2 h-[85vh]">
      <div class="flex justify-between items-center w-full max-w-9xl mt-5">
        <a-breadcrumb class="flex items-center">
          <home-outlined />
          <span class="ml-2">当前位置:&nbsp;&nbsp;</span>
          <a-breadcrumb-item>
            <a href="/" class="text-blue-500 hover:underline">首页</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <router-link to="/Policie" class="text-blue-500 hover:underline">政策法规</router-link>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <h2 class="text-2xl font-bold text-center mb-5">政策法规</h2>
      <PlantTable class="plant-table w-full" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import PlantTable from "../DataTable/PlantTable.vue";
import { HomeOutlined } from "@ant-design/icons-vue";

onMounted(() => {
  document.title = '农业外来入侵物种防控与管理平台';
});
</script>

<style scoped>
/* 基本样式 */
.plant-table {
  width: 100%; /* 表格宽度适应屏幕 */
  font-size: 1rem; /* 基础字体大小 */
}

/* 媒体查询 */
@media (max-width: 768px) {
  .bg-white {
    padding: 10px; /* 减少内边距 */
  }

  .text-2xl {
    font-size: 1.5rem; /* 小屏幕上使用更小的字体 */
  }

  .plant-table {
    font-size: 0.9rem; /* 调整表格字体大小 */
  }
}

@media (max-width: 480px) {
  .text-2xl {
    font-size: 1.25rem; /* 更小的屏幕上使用更小的字体 */
  }
}
</style>
